<template>
    <!-- 搜索模块 -->
    <div class="search">
        <el-select
                   v-model="searchText"
                   filterable
                   clearable
                   reserve-keyword
                   remote
                   loading-text="正在加载..."
                   no-match-text="查询不到数据"
                   no-data-text="没有数据"
                   placeholder="输入要查找的姓名"
                   default-first-option
                   :remote-method="handleSearch"
                   @focus="handleSearchInputFocus"
                   @change="searchChange"
                   :loading="searchLoading">
            <el-option
                       v-for="item in searchOptions"
                       :key="item"
                       :value="item" />
        </el-select>

        <!-- 添加按钮 -->

        <el-button type="primary" @click="addStu">添加</el-button>

    </div>
    <!-- 导出excel -->
    <div class="export-excel">
        <el-button @click="handleExport">
            <template #icon>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-excel"></use>
                </svg>
            </template>
            <template #default>
                导出excel
            </template>
        </el-button>
    </div>
    <!-- 表格模块 -->
    <div class="dataTable">
        <el-table :data="stuList" border style="width: 100%"
                  element-loading-background="rgba(122, 122, 122, 0.3)"
                  element-loading-text="正在加载"
                  v-loading="stuTableLoading">
            <el-table-column align="center" label="头像" width="100">
                <template #default="{ row, $index }">
                    <el-image
                              style="width: 70px; height: 70px"
                              :src="previewImgList[$index]"
                              :zoom-rate="1.2"
                              :preview-src-list="previewImgList"
                              :initial-index="$index"
                              fit="cover" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="120" />
            <el-table-column align="center" prop="class" label="班级" />
            <el-table-column align="center" prop="degree" label="学历" />
            <el-table-column align="center" prop="productUrl" label="项目" />
            <el-table-column align="center" prop="cTime" label="创建时间" />
            <el-table-column align="center" label="操作">
                <template #default="{ row }">
                    <el-button v-has:read="permissionsButton">查看</el-button>
                    <el-button v-has:edit="permissionsButton" type="primary" @click="editStu(row)">编辑</el-button>
                    <el-button v-has:delete="permissionsButton" type="danger" @click="delStu">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pagenation">
        <el-pagination background layout="prev, pager, next" @current-change="handlePageSizeChange"
                       :current-page="fetchTableListParam.page"
                       :page-size="fetchTableListParam.count" :total="total" />
    </div>
    <!-- dialog弹窗 -->
    <s-dialog
              :reviewData="reviewData"
              :action="dialogAction"
              :title="dialogTitle"
              v-model="dialogVisible"></s-dialog>
</template>
<script setup>

//引入watch

// 搜索模块逻辑
import { ref, onMounted, watch, reactive } from "vue"

//引入搜索数据的方法

import * as api from "@/api/stu"

//引入导出excel的方法
import qee from "qf-export-excel"

//引入dialog组件

import sDialog from "@/components/sDialog/index.vue"

//引入store

import useUser from "@/store/users"

//使用strore
let userStore = useUser()

//如果搜索了,那么要显示搜索结果的分页

//声明一个用于标识是否搜索的变量

let isSearch = false;

//如果没有搜索,那么就显示全部数据的分页

//封装一个搜索的方法

let searchList = async (key = "", isSelect = false, param = { page: 1, count: 5 }) => {
    // console.log('key----', key)
    console.log('page---', param.page)
    isSearch = true;
    //打开表格的loading
    isSelect && (stuTableLoading.value = true)

    //打开loading
    searchLoading.value = true;
    try {
        //发起请求
        let res = await api.searchStuApi({ key, page: param.page, count: param.count })


        //修改分页的taotal 

        isSelect && (total.value = res.data.total)

        //对searchOptions进行赋值操作
        // 对searchOptions中的元素,根据name进行去重处理
        searchOptions.value = Array.from(new Set(res.data.data.map(item => item.name)))
        // console.log(searchOptions.value)
        //关闭Loading
        searchLoading.value = false;
        //更新表格数据
        isSelect && (stuList.value = res.data.data) && (stuTableLoading.value = false)
    } catch (e) {
        console.log(e)
        // 关闭Loading
        searchLoading.value = false
    }
}


//逻辑:

//1.获取用户输入的关键字,请求服务器,传递搜索关键字

//2.服务器返回搜索的结果,我们进行展示

//搜索的关键字
let searchText = ref('')

//触发的远程所有的方法

let handleSearch = (input) => {
    console.log('input---', input)
    console.log('handleSearch')
    // console.log(input)
    //调用封装好的搜索的方法
    input && searchList(input)
}

//搜索框获得焦点的时候,清掉之前模糊搜索填充的数据

let handleSearchInputFocus = () => {
    searchOptions.value = []
}

//搜索选择器选择内容的时候触发的change事件

const searchChange = (key) => {
    // console.log('key----',key)
    console.log('searchChange')
    //如果key是一个空字符串,说明不是搜索状态了
    if (!key) {
        //将控制分页的参数重新变成第一页
        fetchTableListParam.page = 1;
        //让搜索的标识字段变成false
        isSearch = false;
        //获取全部的服务器数据
        getStuList(fetchTableListParam)
    } else {
        //搜索的时候将分页进行初始化
        fetchTableListParam.page = 1;
        //是搜索,就要调用搜索的方法
        searchList(key, true, { page: fetchTableListParam.page, count: fetchTableListParam.count })
    }
}

//搜索加载提示

const searchLoading = ref(false);

//select的选项数据

const searchOptions = ref([])


// ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

// 表格模块

//声明表格param响应式对象

let fetchTableListParam = reactive({
    page: 1,
    count: 5,
    class: ""
})

//定义控制表格加载动画的变量

let stuTableLoading = ref(false)

//封装一个用于获取stu表格数据的方法

const getStuList = async (param) => {
    stuTableLoading.value = true;
    try {
        //发起请求
        let res = await api.getStuListApi(param)
        //给表格数据赋值
        stuList.value = res.data.data
        // console.log('stulist-----', stuList)
        //对分页的total进行复制操作
        total.value = res.data.total
        stuTableLoading.value = false
    } catch (e) {
        console.log(e)
        stuTableLoading = false
    }
}
//声明表格的响应式变量
const stuList = ref([])

//预览图片的列表

let previewImgList = ref([])

//监听stuList的变化,生成图片预览列表数据

watch(stuList, (newVal) => {
    // console.log('newVal---',newVal)
    previewImgList.value = newVal.map(item => item.headimgurl ? item.headimgurl : 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png')
    // console.log(previewImgList)
})

//---------------------华丽的分割线------------------------

//分页逻辑

//total 总页数
let total = ref(10)
//page-size 一页显示多少个

//size-change 页码变化的时候触发的事件

//声明一个页码发生变化的处理函数

let handlePageSizeChange = (page) => {
    console.log('pagechange---', page)
    // console.log(value)
    console.log('handlePageSizeChange')
    fetchTableListParam.page = page;
    // console.log('isSearch---',isSearch)
    // console.log('searchText---', searchText.value)
    if (isSearch) {
        //搜索状态,显示搜索结果的分页
        searchList(searchText.value, true, { page: fetchTableListParam.page, count: fetchTableListParam.count })
    } else {
        //需要重新向服务器获取新的表格数据
        getStuList(fetchTableListParam)
    }
}

// ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

//导出excel

//定义表头

let titleList = [
    {
        title: "头像",
        key: "headimgurl"
    },
    {
        title: "姓名",
        key: "name"
    },
    {
        title: "班级",
        key: "class"
    },
    {
        title: "学历",
        key: "degree"
    },
    {
        title: "项目",
        key: 'productUrl'
    },
    {
        title: "创建事件",
        key: "cTime"
    }
]

const handleExport = () => {
    qee(titleList, stuList.value, '测试项目导出')
}

//钩子,在组件加载之后要处理的业务

onMounted(() => {
    //获取表格数据
    getStuList(fetchTableListParam)
})

// ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️


//按钮鉴权

//声明一个自定义指令 

//从store中获取用户的按钮权限

let permissionsButton = userStore.permission.value.buttons;

let vHas = {
    mounted(el, binding) {
        // console.log(permissionsButton)
        // console.log(binding)
        // 如果用户没有这个按钮权限 我们直接让按钮不显示
        if (binding.value && Array.isArray(binding.value)) {
            //如果传递的表达式的值是一个数组,并且已经传递了
            let has = binding.value.includes(binding.arg)
            if (!has) {
                //没有这个按钮权限
                el.style.display = 'none'
            }
        }

    }
}


//声明控制dialog显示隐藏的变量

let dialogVisible = ref(false)

// dialog标题
let dialogTitle = ref('添加学员信息')
//dialog操作类型
let dialogAction = ref('add')
//表格中的增删改
let addStu = () => {
    dialogVisible.value = true
}
//声明数据回显的响应式变量
let reviewData = ref();
//编辑学员
let editStu = (row) => {
    dialogVisible.value = true;
    dialogTitle.value = '编辑学员信息'
    dialogAction.value = 'edit'
    // console.log(row)
    reviewData.value = { ...row }
}
//删除学员
let delStu = () => {

}



</script>

<style scoped lang="scss">
.search .el-select :deep(.el-input__wrapper) {
    width: 300px;
}

.search,
.stuTable,
.export-excel,
.pagenation,
.add {
    margin: 20px 0;
}

.search {
    :deep(.el-input__wrapper) {
        min-width: 400px;
        height: 40px;
    }
}

.el-pagination {
    justify-content: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-input__wrapper {
    width: 300px;
}
</style>
